<script setup>
import {reactive} from "vue";
import localStorageAPI from "@/utils/localStorageAPI.js";

// 打字内容
const znch_data = `
<div class="znch">
<p><div class="question"></div>我是谁？</p>
<p><div class="answer"></div>我是胡兴，你可以称我的英文名字 victor.hx ，一名正在茁壮成长的java程序员 ，1年的在校项目经历，以及3年的工作经验</p>

<p><div class="question"></div>你当前掌握的技术栈有哪些？</p>
<p><div class="answer"></div>前端的技术栈有： Vue3.x /Pinia/webpack/vite/ NuxtJS/ ECharts / Element UI 等</p>
<p><div class="answer"></div>后端的技术栈有： Java / SSM / springBoot / SpringCloud 等</p>
<p><div class="answer"></div>数据库缓存相关技术： Redis / MySQL 等</p>

<p><div class="question"></div>为什么做这个网站？</p>
<p><div class="answer"></div>在项目中进行成长，锻炼代码掌握能力，提升场景应变能力</p>
</div>
`
const en_data = `
<div class="en">
<p><div class="question"></div>Who am I?</p>
<p><div class="answer"></div>Hu Xing, aka victor.hx. Skilled Java programmer with 1 year academic with 3 years professional experience.</p>

<p><div class="question"></div> What are the technology stacks you currently possess? </p>
<p><div class="answer"></div> Front-end: Vue3.x, Pinia, webpack, vite, NuxtJS, ECharts, Element UI.</p>
<p><div class="answer"></div> Backend: Java, SSM, SpringBoot, SpringCloud.</p>
<p><div class="answer"></div> Database / Caching: Redis, MySQL.</p>

<p><div class="question"></div>Why do you create this website?</p>
<p><div class="answer"></div> To improve my coding skills, adaptability, and project experience.</p>
</div>
`
// 判断之前是否有加载过页面
const userZoomIn = localStorageAPI.getData("userZoomIn")
const overWriteFlag = reactive({
  zn_ch: false,
  en: false
})
const changeNowState = (value, type) => {
  // 判断当前打字效果名称 并设置类型 设置为只在第一次进入的时候进行打字 过期时间 1个小时
  // console.log(value, type)
  if (value === 'en')
    overWriteFlag.en = type
  else
    overWriteFlag.zn_ch = type
  localStorageAPI.setData("userZoomIn", true, 10 * 60 * 1000)
}


// 小花的 随机数组
const randomList = reactive([])
// 随机生成小花的数组
const randomNum = (num, min, max) => {
  // 先清空数组
  // console.log(randomList, 'old List')
  if (randomList.length > 0) {
    randomList.splice(0, randomList.length)
  }
  for (let i = 0; i < num; i++) {
    let randomNum = Math.random() * (max - min) + min
    randomList.push(parseInt(randomNum))
  }
  // console.log(randomList, 'new List')
}
randomNum(10, 1, 27)
// 定时 变换花的类型
setInterval(() => {
  randomNum(8, 1, 5)
}, 100000)

// TODO 阻尼感效果

// 左侧滚动的文字
const leftScrollData = [
  {
    "title": "我生来平庸，却也生来骄傲。"
  },
  {
    "title": "我知道这世界上没有最好，只有更好"
  },
  {
    "title": "我想要的一切都要靠自己的努力得到。"
  },
  {
    "title": "有梦就去追 没死就别停"
  },
  {
    "title": "没有伞的孩子必须努力奔跑"
  },
  {
    "title": "你必须非常努力 才能显得毫不费劲"
  },
  {
    "title": "出色一点 从能力到容貌"
  },
  {
    "title": "我不喜欢轻易放弃的人"
  },
  {
    "title": "人生不应该在迷茫中度过"
  },
  {
    "title": "出色一点 从能力到容貌"
  },
  {
    "title": "永远清醒 永远温柔 永远知进退"
  },
  {
    "title": "每个人都一样 都有一段独行的日子"
  },
  {
    "title": "或长或短 这都是无可回避的"
  },
  {
    "title": "不必总觉得生命空空荡荡"
  },
  {
    "title": "放心吧 一时的孤独只是意味着"
  },
  {
    "title": "你值得拥有更好的"
  },
  {
    "title": "你要接受自己的普通"
  },
  {
    "title": "然后拼尽全力去与众不同"
  }
]

</script>

<template>
  <div class="homePage">
    <!-- 吸顶的header/menu -->
    <div class="w1300 ma  h-100 text-center justify-around welcome">
      <div class="title">
        WelCome
      </div>
    </div>
    <div class="flower" @click="randomNum(10,1,27)">
      <div class="flowers">
        <!--<img src="@/assets/images/homePage/flowers/flower1.png">-->
        <img v-for="index in randomList" :src="`src/assets/images/home/flowers/flower${index}.png`" alt=""
             height="40px"/>
      </div>
      <div class="grass"/>
    </div>
    <div class="selfIntroduction">
      <!-- 问答形式的自我介绍 -->
      <div class="w1300 ma flex justify-between h550">
        <div class="box-border bd-10px_solid_transparent w700 text-left cursor-pointer">
          <!-- 如果之前进入过 直接展示-->
          <div v-if="userZoomIn" v-html="znch_data"/>
          <vuetyped :showCursor="false" :smart-backspace="true" :strings="[znch_data]" :typeSpeed="8"
                    v-else @onComplete="changeNowState('zn_ch',true)">
            <div class="typing"/>
          </vuetyped>
        </div>
        <div class="box-border bd-10px_solid_transparent w700 text-left cursor-pointer">
          <!-- 如果之前进入过 直接展示-->
          <div v-if="userZoomIn" v-html="en_data"/>
          <vuetyped :showCursor="false" :smart-backspace="true" :strings="[en_data]" :typeSpeed="0"
                    v-else @onComplete="changeNowState('en',true)">
            <div class="typing"/>
          </vuetyped>
        </div>
      </div>
      <!-- 当完成的时候进行 展示下方的内容 -->
      <div v-if="overWriteFlag.zn_ch && overWriteFlag.en || userZoomIn" class="w100 text-center ma cursor-default">
        向下滚动 👇
      </div>
    </div>
    <div class="projectIntroduction">
      <!-- 左侧向上无缝滚动的鸡汤语录 -->
      <div class="leftScrolling">
        <vue3-seamless-scroll
            :hidden="1000"
            :hover="true"
            :list="leftScrollData"
            :single-height="30"
            :single-wait-time="2000"
            class="scroll"
        >
          <div v-for="(item, index) in leftScrollData" :key="index" class="item">
            <div class="info"><i style="color:#441e1e;">➜ &nbsp;</i><i>{{ item.title }}</i></div>
          </div>
        </vue3-seamless-scroll>
      </div>
      <!-- 6 个 笔记展示 -->
      <div class="right">
        <div class="showItem">java</div>
        <div class="showItem">python</div>
        <div class="showItem">go</div>
        <div class="showItem">MySQl</div>
        <div class="showItem">Linux</div>
        <div class="showItem">Redis</div>
      </div>
    </div>
    <!--技能展示-->
    <div class="skillList">
      <div class="skill">Java</div>
      <div class="skill">Spring</div>
      <div class="skill">SpringMVC</div>
      <div class="skill">MyBatis</div>
      <div class="skill">MyBatis-plus</div>

      <div class="skill">SpringBoot</div>
      <div class="skill">SpringCloud</div>
      <div class="skill">SpringData</div>
      <div class="skill">Linux</div>
      <div class="skill">Shell</div>
      <div class="skill">Docker</div>

      <div class="skill">MySQL</div>
      <div class="skill">Redis</div>
      <div class="skill">MongoDB</div>

      <div class="skill">HTML</div>
      <div class="skill">CSS</div>
      <div class="skill">JavaScript</div>

      <div class="skill">Vue2</div>
      <div class="skill">Vue3</div>
      <div class="skill">NuxtJS</div>
      <div class="skill">Vue Router</div>
      <div class="skill">VueX</div>
      <div class="skill">Pinia</div>

      <div class="skill">Element UI</div>
      <div class="skill">Ant Design</div>
      <div class="skill">Echarts</div>

      <div class="skill">Webpack</div>
      <div class="skill">Vite</div>

      <!--selfTag-->
      <div class="skill">算法进阶 ing</div>
      <div class="skill">攻城狮</div>

    </div>
  </div>
</template>
<style lang="less">

.znch {
  font-size: 18px;
  color: #564d4d;
  word-spacing: 6px;
  line-height: 30px;
  font-weight: 550;

  p {
    height: 10px;
  }
}
.en {
  font-size: 18px;
  color: #564d4d;
  word-spacing: 6px;
  line-height: 30px;
  font-weight: 550;

  p {
    height: 10px;
  }
}
.homePage {
  background: #f6f8fa;
}
.question {
  height: 18px;
  display: inline;
  border-left: 4px solid #a8d559;
  padding-left: 5px;
}
.answer {
  height: 18px;
  display: inline;
  border-left: 5px solid #d55959;
  padding-left: 5px;
}
.welcome {
  display: flex;
  flex-direction: column;

  cursor: default;
  font-family: WoDeSiJie;
  color: #044f7e;
  font-size: 40px;
  transition: all 0.5s;
  font-weight: 800;
}

// 花丛效果
.flower {
  width: 1300px;
  margin: 15px auto 10px;
  border-bottom: 2px solid #926327;
  box-sizing: border-box;
  height: 40px;
  overflow: hidden;

  .flowers {
    height: 50px;
    margin-bottom: -30px;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .grass {
    width: 100%;
    height: 25px;
    background-image: url("@/assets/images/home/flowers/flower7.png");
  }
}

// 打字机的自我介绍
.selfIntroduction {
  font-family: HuLai;
}

// 滚动的鸡汤和 model 模块 可以换成 项目模块
.projectIntroduction {
  width: 1300px;
  height: 650px;
  margin: 60px auto 0;
  display: flex;
  justify-content: space-between;

  .leftScrolling {
    width: 350px;
    height: 600px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    .scroll {
      width: 400px;
      height: 600px;
      overflow: hidden;

      .item {
        .info {
          font-family: HuLai;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #213547;
          cursor: pointer;
        }
      }
    }
  }

  .right {
    width: 900px;
    height: 600px;
    display: inline-grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 300px 300px;

    .showItem {
      border-radius: 20px;
      border: 1px solid #d55959;
      margin: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: default;
      user-select: none;
    }
  }
}

// skills 技能模块
.skillList {
  width: 1000px;
  margin: 0 auto;
  height: 240px;
  border: 1px solid #d55959;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  .skill {
    display: inline-block;
    border: 1px solid #f1f1f1;
    padding: 5px 15px;
    font-size: 16px;
    border-radius: 5px;
    margin: 3px;
    font-family: monospace;
    background: rgb(255, 255, 255);
    color: #4b4545;
  }
}
</style>
